<template>
    <div class="mb-3">
        <div class="card">
            <div class="card-header">
                回复内容
            </div>
            <div class="card-body">
                <div class="card mb-3" v-for="(content,index) in text.contents" :key="index">
                    <div class="card-body">
                        <div class="form-group">
                            <textarea class="form-control" v-model="text.contents[index]"></textarea>
                        </div>
                    </div>
                    <div class="card-footer text-muted">
                        <button class="btn btn-outline-secondary btn-sm" type="button" @click="del(index)">删除</button>
                    </div>
                </div>
            </div>
            <div class="card-footer text-muted">
                <button class="btn btn-outline-primary btn-sm" @click="add()" type="button">添加回复信息</button>
            </div>
        </div>
        <textarea name="wechat[contents]" v-html="text.contents" hidden></textarea>
    </div>
</template>
<script>
    export default {
        props: {
            id: {type: Number, default: 0}
        },
        data() {
            return {
                text: {contents: []},
            }

        },
        mounted() {
            if (this.id) {
                this.get();
            }
        },
        methods: {
            async get() {
                const response = await this.axios.get(`wechat/text/${this.id}`);
                this.text=response.text

            },
            add() {
                this.text.contents.push('');
            },
            del(index) {
                this.$confirm('确认删除?', '温馨提示').then(() => {
                    this.text.contents.splice(index, 1);
                })
            }
        }
    }
</script>

<style lang="scss">

</style>

